<template>
  <van-nav-bar title="客服聊天" left-text="" left-arrow @click-left="goBack" />
  <div id="container">
    <p class="box">
      <span class="op">
        <img src="/public/assets/images/05.jpg" alt="" />
      </span>
      <span class="io">有什么服务可以帮到您呢</span>
    </p>
    <div v-for="(message, index) in messages" :key="index" :class="{content:message.type === 'user', box:message.type === 'bot'}">
      <span class="oi" v-if="message.type === 'user'">{{ message.text }}</span>
      <div class="photo" v-if="message.type === 'user'">
        <img src="/public/assets/images/02.jpg" alt="" />
      </div>
      <div class="op" v-if="message.type === 'bot'">
        <img src="/public/assets/images/05.jpg" alt="" />
      </div>
      <span
        class="io"
        v-if="message.type === 'bot'"
        v-html="message.text"
      ></span>
    </div>
    <div class="gh"></div>
    <div class="footer">
      <input type="text" v-model="msg" class="inp" />
      <button type="button" @click="sendMessage" id="btn">发送</button>
    </div>
  </div>
</template>
  
  <script setup>
import axios from "axios";
import { ref } from "vue";
const msg = ref("");
const messages = ref([]);
const { proxy } = getCurrentInstance();
const goBack = () => {
  proxy.$router.go(-1);
};
const sendMessage = async () => {
  if (!msg.value) return;
  // 用户消息
  messages.value.push({ text: msg.value, type: "user" });
  try {
    let result = await Api.ProductCustomer({
      msg: msg.value,
    });

    if (result.code === 1) {
      messages.value.push({ text: result.data, type: "bot" });
    }
  } catch (error) {
    console.error("Error sending message:", error);
  } finally {
    msg.value = ""; // 清空输入框
  }
};
</script>
<style scoped>
.box {
  text-align: left;
}
.gh{
  height: 40px;
}
.content {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  /* align-items: center; */
}

.footer {
  width: 100%;
  height: 52px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  background-color: #ebebeb;
  padding: 8px 76px 8px 12px;
  box-sizing: border-box;
  box-shadow: 0 -2px 5px #d8d8d8;
}

.footer .inp {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #d8d8d8;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 18px;
}

#btn {
  width: 54px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  position: absolute;
  right: 12px;
  top: 9px;
  color: #fff;
  background-color: #02cb0b;
  border: none;
}

.box {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  margin-left: 10px;
}
.op,.photo{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  
}
.box img,
.op img,
.photo img,
.po img {
  width: 40px; /* 让图片的宽度填满容器 */
  height: 40px; /* 让图片的高度填满容器 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  border-radius: 50%; /* 保持圆形 */

}

.io,
.oi {
  padding: 10px;
  border-radius: 10px;
  margin: 7px 10px; /* 上下间距 7px, 左右间距 10px */
  font-size: 20px;
  max-width: 300px;
}

.io {
  background-color: rgb(161, 161, 255); /* 用户消息背景颜色 */
  display: flex;
  text-align: left;
}

.oi {
  background-color: salmon; /* Bot 消息背景颜色 */
  display: flex;
}
</style>